<template>
  <div>
    <el-row>
      <el-col
        :offset="8"
        :span="8">
        <div v-show="this.$store.state.signType == 'signUp'">
          <el-card class="sign-card">
            <div
              slot="header"
              class="clearfix"
              style="text-align:center;">
              <span style="line-height:36px;font-size:30px;">注册</span>
            </div>
            <el-form
              ref="signUpForm"
              :model="signUpForm"
              :rules="signUpFormRule"
              :label-position="labelPosition">
              <el-form-item
                label="name"
                prop="name">
                <el-input v-model="signUpForm.name"></el-input>
              </el-form-item>
              <el-form-item
                label="E-mail"
                prop="email">
                <el-input v-model="signUpForm.email"></el-input>
              </el-form-item>
              <el-form-item
                label="Password"
                prop="password">
                <el-input
                  type="password"
                  v-model="signUpForm.password">
                </el-input>
              </el-form-item>
              <el-form-item
                label="Repassword"
                prop="repassword">
                <el-input
                  type="password"
                  v-model="signUpForm.repassword">
                </el-input>
              </el-form-item>
              <el-form-item
                label="同意协议"
                prop="">
                <el-switch
                  on-text=""
                  off-text=""
                  v-model="signUpForm.personalInformation">
                </el-switch>
              </el-form-item>
              <el-form-item style="text-align:center;">
                <el-button
                  style="width:100%"
                  @click="onSignUp('signUpForm')">
                  Sign Up
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <div v-show="this.$store.state.signType == 'signIn'">
          <el-card class="sign-card">
            <div
              slot="header"
              class="clearfix"
              style="text-align:center;">
              <span style="line-height:36px;font-size:30px;">登录</span>
            </div>
            <el-form
              ref="signInForm"
              :model="signInForm"
              :rules="signInFormRule"
              :label-position="labelPosition">
              <el-form-item
                label="E-mail"
                prop="email">
                <el-input v-model="signInForm.email"></el-input>
              </el-form-item>
              <el-form-item
                label="Password"
                prop="password">
                <el-input
                  type="password"
                  v-model="signInForm.password">
                </el-input>
              </el-form-item>
              <el-form-item style="text-align:center;">
                <el-button
                  style="width:100%"
                  @click="onSignIn('signInForm')">
                  Sign In
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script >
import { mapState, mapActions } from 'vuex'

export default {
  name: 'sign-view',
  components: {},
  data () {
    let repasswordCheck = (rule, value, callback) => {
      if (value !== this.signUpForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      labelPosition: 'left',
      signType: '',
      signUpForm: {
        name: '',
        email: '',
        password: '',
        repassword: '',
        personalInformation: ''
      },
      signUpFormRule: {
        // 文件:node_modules\_element-ui@1.4.4@element-ui\lib\input.js
        name: [
          {required: true, message: '请输入name', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入E-mail', trigger: 'blur'},
          // 匹配正则表达式
          {pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, message: 'E-mail格式错误', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {minlength: 6, maxlength: 12, message: '密码6-12位', trigger: 'blur'}
        ],
        repassword: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {validator: repasswordCheck, message: '两次密码不同', trigger: 'blur'}
        ]
      },
      signInForm: {
        email: '',
        password: ''
      },
      signInFormRule: {
        email: [
          {required: true, message: '请输入E-mail', trigger: 'blur'},
          {pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, message: 'E-mail格式错误', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  computed: mapState({
    rule: state => state.rule
  }),
  watch: {
    rule: function (val, oldVal) {
      if (val === 100) {
        this.$router.push({name: 'DiaryDisplayView'})
      }
    }
  },
  beforeUpdate () {
    if (this.$store.state.signType !== this.signType) {
      if (this.$store.state.signType === 'signUp') {
        this.$refs['signInForm'].resetFields()
      } else {
        this.$refs['signUpForm'].resetFields()
      }
      this.signType = this.$store.state.signType
    }
    return true
  },
  methods: {
    ...mapActions([
      'signup',
      'sigin'
    ]),
    onSignUp (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.signup(this.signUpForm)
            .then(res => {
              this.sigin(this.signUpForm)
            })
        }
      })
    },
    onSignIn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.sigin(this.signInForm)
        }
      })
    }
  }
}
</script>
<style scoped>
.sign-card {
  margin-top: 15px;
}
</style>